<template>
  <div class="carousel" @mouseover="pause" @mouseout="resume">
    <transition-group tag="div" class="slides" :style="{ transform: `translateX(${translateX}px)` }">
      <img v-for="(slide, index) in slidesNew" :key="index" :src="slide.picture" class="slide" />
    </transition-group>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

import { articleList, gettagList, getAdvertisement } from './api/api';

// 轮播图的数据
const slides = [
];

const slidesNew = ref([]);

onMounted(async () => {
  try {
    const [fetchedCarouselData] = await Promise.all([
     
      getAdvertisement(),
    ]);
    slidesNew.value = fetchedCarouselData.data;
	console.log(fetchedCarouselData.data);
	console.log(slidesNew);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
});


const currentIndex = ref(0);
const translateX = ref(0);
const intervalId = ref(null);

const nextSlide = () => {
  if (currentIndex.value === slides.length - 1) {
    currentIndex.value = 0;
    translateX.value = 0;
  } else {
    currentIndex.value++;
    const slideWidth = document.querySelector('.slide').clientWidth;
    translateX.value -= slideWidth;
  }
};

const startAutoPlay = () => {
  intervalId.value = setInterval(nextSlide, 3000); // 每3秒自动切换
};

const pause = () => {
  clearInterval(intervalId.value);
};

const resume = () => {
  startAutoPlay();
};

onMounted(() => {
  startAutoPlay();
});

onUnmounted(() => {
  clearInterval(intervalId.value);
});
</script>
<style scoped>
.carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.slide {
  width: 100%;
  height: 300px; /* 调整高度 */
  object-fit: fill; /* 保持图片比例并填充容器 */
}
/* 媒体查询 */
@media (max-width: 600px) {
  .slide {
    height: 200px; /* 在小屏幕上进一步减少高度 */
  }
}
</style>